<template>
  <div  class="app-goodboy">
    <div class="boycool">
      <el-form size="mini" :model="formInline" :inline="true">
        <el-form-item label="状态">
          <el-radio size="mini"  v-model="statusArray" label="" border>全部</el-radio>
          <el-radio size="mini" class="minira" v-model="statusArray" label="28,29,31,33,34,35,38" border>已完成</el-radio>
          <el-radio size="mini" class="minira"  v-model="statusArray" label="21,22" border>已取消</el-radio>
          <el-radio size="mini" class="minira"  v-model="statusArray" label="24,25,27,32,36,37" border>已退款</el-radio>
          <el-radio size="mini" class="minira"  v-model="statusArray" label="20" border>待付款</el-radio>
          <el-radio size="mini" class="minira"  v-model="statusArray" label="23" border>待接单</el-radio>
          <el-radio size="mini" class="minira"  v-model="statusArray" label="26" border>服务中</el-radio>
          <el-radio size="mini" class="minira"  v-model="statusArray" label="30" border>售后中</el-radio>
        </el-form-item><br>
        <el-form-item label="时间">
          <el-date-picker
            v-model="value2"
            value-format='yyyy-MM-dd'
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
            align="right">
          </el-date-picker>
        </el-form-item>
        <br>
        <el-form-item label="下单">
          <!--<el-select v-model="value" placeholder="请选择" class="xxddsele">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>-->
          <el-input class="xxddinput" v-model="formInline.orderParames" placeholder="下单者昵称/ID"></el-input>
        </el-form-item>
        <el-form-item label="陪玩">
          <!--<el-select v-model="value1" placeholder="请选择" class="ppwwsele">
            <el-option
              v-for="item in optionsCopy"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>-->
          <el-input class="ppwwinpu" v-model="formInline.playerParames" placeholder="陪玩昵称/ID"></el-input>
        </el-form-item><br>
        <el-form-item label="金额">
          <el-input-number v-model="formInline.moneyStart" :min="0" ></el-input-number>———
          <el-input-number v-model="formInline.moneyEnd"  :min="0"  ></el-input-number>
        </el-form-item>

        <br>
        <el-form-item label="类型">
          <el-select v-model="gameId"  multiple placeholder="请选择"  class="allsele1">
            <el-option
              v-for="item in optionsTypes"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button size="mini" @click="query()" type="primary" icon="el-icon-search">查询</el-button>
      </el-form>
    </div>
    <div class="cy_dd222">
      <div class="hezi222">
         <el-button size="mini" @click="exportExcel()" type="primary" class="ppdd">批量导出</el-button>
        <div class="dd_select" style="border:none">
          <el-table class="per_tb000" stripe v-loading="loading" border :data="tableData">
            <el-table-column prop="orderNo" label="订单号" width="140px">

            </el-table-column>
            <el-table-column prop="productName" label="陪玩师">
              <template slot-scope="scope">
                {{scope.row.productName}}<br>ID:{{scope.row.goodsNo}}
              </template>
            </el-table-column>
            <el-table-column label="下单人" width="100px">
              <template slot-scope="scope">
                {{scope.row.nickname}}&nbsp
                <br>
                ID:{{scope.row.memberNo}}
              </template>
            </el-table-column>
            <el-table-column prop="productSpecifica" label="陪玩项目">

            </el-table-column>
            <el-table-column prop="orderPrice" label=" 单价(N币)">

            </el-table-column>
            <el-table-column prop="orderNumber" label=" 数量">

            </el-table-column>
            <el-table-column prop="orderPrice" label="应付金额">

            </el-table-column>
            <el-table-column prop="payAmount" label=" 实付金额">

            </el-table-column>
            <el-table-column prop="status" label=" 订单状态">
              <template slot-scope="scope">
                <el-tag type="success" size="mini" v-if="scope.row.status === 28 || scope.row.status ===29|| scope.row.status ===31 || scope.row.status ===33 || scope.row.status ===34 || scope.row.status ===35 || scope.row.status ===38">已完成</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scope.row.status === 21 || scope.row.status ===22">已取消</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 24 || scope.row.status ===25 || scope.row.status ===27 || scope.row.status ===32 || scope.row.status ===36 || scope.row.status ===37">已退款</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 20">待付款</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 23">待接单</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 26">服务中</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 30">售后中</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="orderTime" label="操作时间" width="100">
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination-right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.pageNum"
            :page-sizes="[10]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="formInline.total">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { getOrderListAPI } from '@/api/order'
  import { getServiceAPI ,exportAPI} from "@/api/user";
    import { mapGetters } from 'vuex'
    export default {
      name: 'OrderDetail',
      data() {
        return {
          value1:'',
          statusArray:'',
          gameId:[],
          options: [{
            value: '选项1',
            label: 'ID'
          }, {
            value: '选项2',
            label: '昵称'
          }],
          optionsCopy: [{
            value: '选项1',
            label: 'ID'
          }, {
            value: '选项2',
            label: '昵称'
          }],
          value2:'',
          optionsTypes:[],
          pickerOptions: {
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [new Date(), new Date()]);
              }
            },{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一年',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          value: '',
          serviceLength:0,
          formInline: {
            search: "",
            statusArray: [],//状态数组
            timeType: 0,//时间范围类型 0自定义范围，近一年：1，近一月：2，近一周：3,今日：4
            end: "", //自选日期结束日期
            start: "",//自选日期开始日期
            playerNo:"",  //陪玩号
            gameId:"",    //服务类型id
            orderParames:"", //下单查询参数
            playerParames:"",// 陪玩查询参数
            moneyStart:0,//金额左范围
            moneyEnd:0,//金额右范围
            pageNum: 1,
            pageSize: 10
          },
          editUser: null, // 编辑时传入的对象
          loading: false,
          tableData: [],
          dialog: {
            infoStatus: false
          }
        }
      },
      computed: {
        ...mapGetters([
          'buttons',
        ])
      },
      mounted() {
        this.getOrderListAPI()
        this.getServiceList()
      },
      methods: {
        handleChange(){
          if(this.formInline.moneyEnd <= this.formInline.moneyStart){
            this.$message.error('左边金额不能大于右边金额，请重新输入')
          }
        },
        // 导出事件
        exportExcel() {
          exportAPI(this.formInline).then(res => {
            debugger
            let blob = new Blob([res], {type: "application/vnd.ms-excel"});
            let objectUrl = URL.createObjectURL(blob);
            var downloadA = document.createElement('a');
            downloadA.href = objectUrl;
            downloadA.download = "file";
            downloadA.click();
            //window.URL.revokeObjectURL(downloadA.href);
            /*window.location.href = objectUrl;
            if (res.code === 0) {
             this.dataTool = res.data
            } else {
              this.$message.error(res.msg)
            }*/
          })
        },
        // 时间发生改变的事件
        timeChange(value){
          if(value == null){
            this.formInline.start = ''
            this.formInline.end = ''
          }else {
            this.formInline.start = this.value2[0]
            this.formInline.end = this.value2[1]
          }
        },
        // 获取服务类型
        getServiceList() {
          this.loading = true
          getServiceAPI().then(res => {
            this.loading = false
            if (res.rtnInfo.code === 0) {
              this.optionsTypes = res.rtnInfo.data
              // 将服务类型的长度赋值
              this.serviceLength = res.rtnInfo.data.length
              for(let index in this.optionsTypes){
                this.gameId.push(this.optionsTypes[index].id)
              }
            } else {
              this.$message.error(res.message)
            }
          })
        },
        // 编辑打开弹窗
        openEdit(obj) {
          this.dialog.infoStatus = true
        },
        // 点击查询事件
        query() {
          debugger
          if(this.formInline.moneyEnd < this.formInline.moneyStart){
            this.$message.error('左边金额不能大于右边金额，请重新输入')
            return false
          }
          // string类型转数组类型
          let statusArr = ''
          if (this.statusArray != null && this.statusArray != ''){
            statusArr = this.statusArray.split(',')
          }
          this.formInline.statusArray = statusArr
          // 数组类型转string
          if(this.gameId.length == this.serviceLength){
            this.formInline.gameId  = ''
          } else {
            let stringGameId = ''
            for(let index in this.gameId){
              stringGameId += this.gameId[index] + ','
            }
            this.formInline.gameId = stringGameId
            // 去掉尾部的逗号
            this.formInline.gameId = this.formInline.gameId.slice(0,this.formInline.gameId.length-1)
          }
          this.formInline.pageNum = 1
          this.getOrderListAPI()
        },
        // 操作成功的钩子用来更新列表
        success() {
          this.getOrderListAPI()
        },
        // 关闭弹窗返回的钩子
        closeInfo() {
          this.dialog.infoStatus = false;
        },
        // pageSize发生改变触发
        handleSizeChange(val) {
          this.pageNum = 1
          this.pageSize = val
          this.getOrderListAPI()
        },
        // pageNum 发生改变触发
        handleCurrentChange(val) {
          this.formInline.pageNum = val
          this.getOrderListAPI()
        },
        // 获取用户列表
        getOrderListAPI() {
          this.loading = true
          if(this.formInline.moneyStart == 0){
            this.formInline.moneyStart = ''
          }
          if(this.formInline.moneyEnd == 0){
            this.formInline.moneyEnd = ''
          }
          getOrderListAPI(this.formInline).then(res => {
            this.loading = false
            if (res.rtnInfo.code === 0) {
              this.tableData = res.rtnInfo.data.list
              this.formInline.total = res.rtnInfo.data.total
            } else {
              this.$message.error(res.message)
            }
          })
        }
      }
    }
</script>
<style>
 .per_tb000{
   margin-top:30px;
 }
 .dingd111{
   width: 60px;
   height: 32px;
   padding: 10px;
   border: 2px solid lightgray;
   border-bottom: none;
   border-radius: 9px;
   text-align: center;
   margin-left: 38px;
 }
 .xxddinput.el-input.el-input--mini {
   width: 150px;
 }
 .ppwwinpu.el-input.el-input--mini {
   width: 150px;
   /* height: 30px; */
 }
 .app-goodboy {
   margin-left: 28px;
   margin-top: 33px;
 }
.hezi222 {
    width: 100%;
    height: auto;
    border: 1px solid lightgray;
    padding: 20px;
    border-radius: 10px;
    /* margin-left: 35px; */
    /* position: relative; */
}
 .cy_dd222 {
   margin-top: 14px;
 }
 .allsele1{
   width:820px;
   height:auto;
   overflow: visible;
   z-index: 999;
 }
 .el-radio--mini.is-bordered {
    padding: 6px 10px 0 10px;
    border-radius: 3px;
    height: 28px;
}
button.el-button.ppdd.el-button--primary.el-button--mini {
    /* position: absolute;
    margin-top: 141px;
    margin-left: 47%; */
}
button.el-button.ppdd.el-button--primary.el-button--mini {
    float: right;
}
label.el-radio.minira.el-radio--mini.is-bordered {
    margin-left: -19px;
}
</style>
